<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用JSX创建虚拟DOM</title>
    <style>
        .title{
            height: 100%;
            background-color: aqua;
        }
    </style>
    <!-- 
        JSX语法
            1.全称:JavaScript XML
            2.是React定义的一种类似于XML的JS的扩展语法:JS+XMl; 核心还是JS,只不过扩展了一些新的语法
            3.本质是React.createElement(标签名,标签属性,值)方法的语法糖
     -->
</head>
<body>
    <!-- 引入React核心库 -->
    <script src="../JS/react.development.js"></script>
    <!-- 引入ReactDOM，用于支持react操作DOM -->
    <script src="../JS/react-dom.development.js"></script>
    <!-- 引入babel 用于将书写的JSX语法 编译成JS语法 -->
    <script src="../JS/babel.min.js"></script>
    <!-- 实验用容器 -->
    <div id="test"></div>

    <script type="text/babel">
        const VDOM = (
            <h2 id="atguigu">
                <span>
                    hello react
                </span>    
            </h2>
        )
        ReactDOM.render(VDOM,document.getElementById('test'))

        // 2. 动态赋值
            const myID='atguigu'
            const myData = 'hello,react'
            const VDOM2 = (
                <div>
                    <h1 className="title" id={myID.toUpperCase()}>  
                        <span style={{color:'white',fontSize:'20px'}}>
                            {myData.toUpperCase()}
                        </span>    
                    </h1>
                    <input type="text" />                       
                </div>
            )
            ReactDOM.render(VDOM2,document.getElementById('test'))





        //总结陈词
        /*
            JSX语法规则
                1.定义虚拟DOM时,不要写引号.
                2.标签中混入JS表达式时要用{}
                3.样式的类名不要用class 要使用 className  (因为class是在ES6中类的定义的关键字)
                4.内联样式,要用style={{key:value}}的形式去写
                5.一个虚拟DOM只能有一个根节点
                6.虚拟DOM中的标签必须闭合   (虚拟DOM中写的不是html而是react中的标签,编译过程中会将react中的标签转换为html中的标签)
                7.标签首字母
                    (1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素则报错 <good></good>
                    (2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错                   <Good></Good>
        */
    </script>
</body>
</html>